<template>
  <!-- 页面内容-->
  <div class="audit-content">
    <!-- 页面title -->
    <div class="finance">
      <div class="finance-left">
        <div class="centent-title">
          <span>财政审计</span>
        </div>
        <!-- 页面主体 -->
        <div class="centent-inner">
          <div class="finance-tree">
            <el-tree
              :data="treeList1"
              :props="defaultProps"
              node-key="id"
              accordion
              @node-click="handleClick"
            ></el-tree>
          </div>
        </div>
      </div>

      <div class="finance-right">
        <div class="right-top">
          <div class="centent-title">
            <span>执行范围</span>
          </div>
          <div class="right-content">
            <el-tree
              :data="treeList2"
              :props="defaultProps"
              node-key="id"
              accordion
              @node-click="handleClick"
            ></el-tree>
          </div>
        </div>

        <div class="right-bottom">
          <div class="centent-title">
            <span>方法信息</span>
          </div>
          <div class="right-content">
            <el-tabs :tab-position="tabPosition" type="card">
              <el-tab-pane label="审计提示">
                <div>审计提示</div>
              </el-tab-pane>
              <el-tab-pane label="方法说明">方法说明</el-tab-pane>
              <el-tab-pane label="使用法规">使用法规</el-tab-pane>
              <el-tab-pane label="SQL脚本">SQL脚本</el-tab-pane>
            </el-tabs>
            <div class="lsb-sure">
              <span class="btn-default" @click="sure">执行</span>
              <span class="btn-default">取消</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-dialog title="参数设置" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="开始年份" :label-width="formLabelWidth">
          <el-input v-model="form.begin" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="结束年份" :label-width="formLabelWidth">
          <el-input v-model="form.over" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="单位名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="往来款科目" :label-width="formLabelWidth">
          <el-select v-model="form.subject" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogSure">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //dialog参数设置
      dialogFormVisible:false,
      formLabelWidth: '120px',
      form:{
        begin:'',
        over:'',
        name:'',
        subject:''
      },
      treeList1:[
        {
          label:'财政审计',
          id:0,
          children:[
            {
              label:'财政预（决）算审计',
              id:1,
              children:[
                {
                  label:'往来款清理未清理-两年余额无变化',
                  id:2
                },
                {
                  label:'项目支出预算执行率连续三年低',
                  id:3
                },
                {
                  label:'以拨代支或代编预算',
                  id:4
                },
                {
                  label:'为协会、学会编制预算',
                  id:5
                },
                {
                  label:'往来款清理未清理-两年余额无变化',
                  id:2
                },
                {
                  label:'项目支出预算执行率连续三年低',
                  id:3
                },
                {
                  label:'以拨代支或代编预算',
                  id:4
                },
                {
                  label:'往来款清理未清理-两年余额无变化',
                  id:2
                },
                {
                  label:'项目支出预算执行率连续三年低',
                  id:3
                },
                {
                  label:'以拨代支或代编预算',
                  id:4
                },
                {
                  label:'往来款清理未清理-两年余额无变化',
                  id:2
                },
                {
                  label:'项目支出预算执行率连续三年低',
                  id:3
                },
                {
                  label:'以拨代支或代编预算',
                  id:4
                },
                {
                  label:'往来款清理未清理-两年余额无变化',
                  id:2
                },
                {
                  label:'项目支出预算执行率连续三年低',
                  id:3
                },
                {
                  label:'以拨代支或代编预算',
                  id:4
                },
              ]
            },
            {
              label:'个人审计',
              id:6,
              children:[
                {
                  label:'年度突击花钱',
                  id:7
                },
              ]
            }
          ]
        }
      ],
      treeList2:[
        {
          label:'某大学出版社',
          id:0,
          children:[
            {
              label:'某大学出版社演示帐套',
              id:1,
              children:[
                {
                  label:'2004',
                  id:2
                }
              ]
            },
            
          ]
        }
      ],
      tabPosition:'bottom',
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  methods:{
    handleClick(data){
      console.log(data)
      if(data.label == '2004'){
        this.$router.push({path:'/auditAnalysisPage/dataAnalysis/sqlSearch'})
      }
    },
    sure(){
      this.dialogFormVisible = true
    },
    dialogSure(){
      this.$router.push({path:'/auditAnalysisPage/auditMethod/financeAudit/id/3'})
    }
  }
};
</script>

<style lang="less" scoped>
  .audit-content{
    background: #eee;
    .finance{    
      display: flex;
      .finance-left{
        width: 30%;
        margin-right: 20px;
        .centent-title{
          width: 100%;
        }
      }
      .finance-right{
        width: 70%;
        .right-content{
          background: #fff;
          padding: 20px;
          /deep/.el-tree{
            overflow: auto;
            height: 300px;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 6px;
            box-sizing: border-box;
          }
          /deep/.el-tabs__content{
            height: 240px;
            padding: 20px;
            overflow: auto;
            border: 1px solid #ccc;
            border-radius: 6px;
            box-sizing: border-box;
          }
          /deep/.el-tabs__header{
            border: 0;
          }
          /deep/.el-tabs__nav {
            border-bottom: 1px solid #E4E7ED;
          }
        }
        .right-top{
          height: 390px;
          border: 1px solid #ccc;
          border-top: 0;
          border-radius: 6px;
          box-sizing: border-box;
          background: #fff;
          margin-bottom: 20px;
          
          
        }
        .right-bottom{
          height: 435px;
          background:#fff;
          border: 1px solid #ccc;
          border-top: 0;
          border-radius: 6px;
          box-sizing: border-box;
          .lsb-sure{
            span{
              width: 70px;
              &:hover{
                background: #6C8AB6 ;
                color: #fff;
              }
            }
          }
        }
      }
    }
  }
  
</style>